<template>
  <div class="popup">
    <popup v-model="showPopup" position="bottom" @close="onCancel">
      <div class>
        <!-- <div class="popup-operation">
          <p @click="onCancel">取消</p>
          <p>确定</p>
        </div>
        <div class="popup-container">
          <slot></slot>
        </div>-->
        <slot></slot>
      </div>
    </popup>
  </div>
</template>

<script>
import { Popup } from "vant";

export default {
  data() {
    return {
      showPopup: false,
      columns: [
        {
          value: "方式一",
          defaultIndex: 1
        },
        {
          value: "方式二",
          defaultIndex: 2
        }
      ],
      value: ""
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show(newVal) {
      this.showPopup = newVal;
    }
  },
  components: {
    Popup,
  },
  methods: {
    onCancel() {
      this.showPopup = false;
      this.$emit("onCancel");
    },
    onConfirm(value) {
      this.value = value;
      this.showPopup = false;
      this.$emit("onConfirm", this.value);
    }
  }
};
</script>

<style scoped>
.popup{
  /* position: fixed; */
}

.popup-operation {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  color: #1989fa;
}
</style>